<template>
    <div>
      <!--编写Ant Design组件，组件需要在官方文件查找修改使用-->
      <a-col :span="6">
        <span style="font-size: 16px;font-weight: bolder">省:</span>
        <a-select placeholder="请选择省" style="width: 170px" allowClear showSearch v-model="queryParam.province" >
          <a-select-option v-for="province in provinceList" @click="getCityList(province.code)" :value="province.name" :key="province.name">
            {{ province.name }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="6">
        <span style="font-size: 16px;font-weight: bolder">市:</span>
        <a-select placeholder="请选择市" style="width: 170px" allowClear showSearch v-model="queryParam.city">
          <a-select-option v-for="city in cityList" @click="getAreaList(city.code)" :value="city.name" :key="city.name">
            {{ city.name }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="6">
        <span style="font-size: 16px;font-weight: bolder">区/县:</span>
        <a-select placeholder="请选择区" style="width: 170px" allowClear showSearch v-model="queryParam.area">
          <a-select-option v-for="area in areaList" @click="getCountryList(area.code)" :value="area.name" :key="area.name">
            {{ area.name }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="6" v-if="isCountry">
        <span style="font-size: 16px;font-weight: bolder">乡镇/街道:</span>
        <a-select placeholder="请选择街道" style="width: 170px" allowClear showSearch v-model="queryParam.country">
          <a-select-option v-for="country in countryList" :value="country.name" :key="country.name">
            {{ country.name }}
          </a-select-option>
        </a-select>
      </a-col>

    </div>
</template>

<script>
//定义引入的js插件
import { getAction} from '@/api/manage'
export default {
  props: {
    // 用于接收列表（父组件）查询参数
    queryParam: {
      type: Object,//父组件传入的属性数据类型
      require: true//当前属性是否允许为空
    },
    //用于控制是否显示乡镇
    isCountry: {
      type: Boolean,//当前属性数据类型
      require: false,//是否必须指定该属性
      default: false//当前属性默认值，当require: false时，必须使用该属性指定默认值
    }
  },
  data() {
    return {
      //定义组件中关联属性
      rootUrl: '/user/njtArea/listRoot',//根节点请求路径
      childrenUrl: '/user/njtArea/listChildren',//子节点加载路径
      //省列表
      provinceList:[],
      //市列表
      cityList:[],
      //区/县列表
      areaList:[],
      //乡镇/街道列表
      countryList:[],

    }
  },
  methods: {
    //定义组件事件关联方法
    // 查询所有省份
    initRootList(){
      getAction(this.rootUrl).then(res=>{
        if(res.success){
          this.provinceList = res.result;
        }
      })
    },
    //根据省code查询市列表，并赋值渲染
    getCityList(code){
      // 注意传入参数的写法：{parentCode : value}
      getAction(this.childrenUrl, {parentCode : code}).then(res => {
        if(res.success) {
          this.cityList = res.result;
        }
      })
    },
    // 根据市code 查询所有区
    getAreaList(value){
      //清空乡镇/街道数据
      this.countryList=[];
      getAction(this.childrenUrl, {parentCode : value}).then(res => {
        if(res.success) {
          this.areaList = res.result;
        }
      })
    },
    // 根据区code 查询所有乡镇/街道
    getCountryList(value){
      getAction(this.childrenUrl, {parentCode : value}).then(res => {
        if(res.success) {
          this.countryList = res.result;
        }
      })
    },

  },
  created() {//页面加载前执行的操作
    this.initRootList();
  }
}
</script>